<template>
  <div>
    <nav-header
      :headerTitle="'我的'"
      :navBgColor="'#fff'"
      :isNext="false"
      :isNavBack="false"
      :isNedMsg="true"
      :msgNum="headerMsgNum"
    ></nav-header>
    <section class="page fix_iphonex_margin">
      <div class="header">
        <img
          data-type="1"
          :src="show.avatarUrl?(show.avatarUrl+'?x-oss-process=image/resize,m_fill,h_188,w_188'):this.defaultImg(1)"
          @error="errorImg"
          alt
        />
        <span class="h-name">{{show.nickName}}</span>
        <span class="h-id">ID:{{show.uniqueId}}</span>
        <button @click="goUrl('withdrawal',{})">去提现 >></button>
      </div>
      <div class="section">
        <div class="s-items s-left" @click="goUrl('income',{})">
          <div class="s-content">
            <img src="@/assets/images/mine_list.png" alt />
            <span class="sc-money">{{show.commissionAccumulatedIncome/100}}</span>
            <span class="sc-name">累计收益(元)</span>
          </div>
        </div>
        <div class="s-items s-right" @click="goUrl('withdrawal',{})">
          <div class="s-content">
            <img src="@/assets/images/mine_now.png" alt />
            <span class="sc-money">{{show.accountBalance/100}}</span>
            <span class="sc-name">当前余额(元)</span>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="f-items" @click="goUrl('realname',{type:show.realNameCertStatus})">
          <img class="fi-img" src="@/assets/images/mine_name.png" alt />
          <span class="fi-name">流量主认证</span>
          <!-- <span class="fi-type" v-show="show.realNameCertStatus == 0">未认证</span>
          <span class="fi-type" v-show="show.realNameCertStatus == 1">认证中</span>
          <span class="fi-type" v-show="show.realNameCertStatus == 2">认证通过</span>
          <span class="fi-type" v-show="show.realNameCertStatus == 3">认证失败</span>-->
          <img class="fi-img-right" src="@/assets/images/shop_enter.png" alt />
        </div>
        <div class="f-items" @click="goUrl('myTask',{})">
          <img class="fi-img" src="@/assets/images/mine_plan.png" alt />
          <span class="fi-name">我的任务</span>
          <span class="fi-num" v-if="!show.adForwardingCount == 0"></span>
          <img class="fi-img-right" src="@/assets/images/shop_enter.png" alt v-else />
        </div>
        <div class="f-items" @click="goUrl('myTutorial',{})">
          <img class="fi-img" src="@/assets/images/mine_teach.png" alt />
          <span class="fi-name">任务教程</span>
          <img class="fi-img-right" src="@/assets/images/shop_enter.png" alt />
        </div>
        <div class="f-items" @click="goUrl('myHelp',{})">
          <img class="fi-img" src="@/assets/images/mine_fk.png" alt />
          <span class="fi-name">帮助与反馈</span>
          <img class="fi-img-right" src="@/assets/images/shop_enter.png" alt />
        </div>
        <div class="f-items" @click="goUrl('publicFocus',{})">
          <img class="fi-img" src="@/assets/images/mine_fllow.png" alt />
          <span class="fi-name">关注公众号</span>
          <img class="fi-img-right" src="@/assets/images/shop_enter.png" alt />
        </div>
        <div class="f-items" @click="goUrl('about',{})">
          <img class="fi-img" src="@/assets/images/mine_about.png" alt />
          <span class="fi-name">关于我们</span>
          <img class="fi-img-right" src="@/assets/images/shop_enter.png" alt />
        </div>
        <div class="f-signOut" v-on:click="signOut">退出账号</div>
      </div>
    </section>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast, Dialog } from "vant";
Vue.use(Toast).use(Dialog);
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
import NavFooter from "@/components/NavFooter";
export default {
  name: "infMine",
  mixins: [mixin],
  components: {
    navHeader,
    NavFooter
  },
  data() {
    return {
      headerMsgNum:"",
      show: {
        avatarUrl: "",
        nickName: "***",
        uniqueId: window.localStorage.getItem("uniqueIdByInfluencer"),
        commissionAccumulatedIncome: 0,
        accountBalance: 0,
        realNameCertStatus: 0,
        adForwardingCount: 0
      },
      params: {}
    };
  },
  created () {
    // 我的任务页面，默认显示进行中标签页
    sessionStorage.setItem('activeName', '0')
  },
  mounted() {
    this.init();
    this.initDialog();
    // 网页获取App消息数量
    let parmars_bri = {uniqueId:window.localStorage.getItem("uniqueIdByInfluencer")} ;
    this.$bridge.callHandler("getMsgNumByWeb",parmars_bri, res => {
      this.headerMsgNum = parseInt(res) ;
    }); 
    // app主动推送给消息条数给网页
    this.$bridge.registerHandler("pushMsgNumByApp",(data, responseCallback)=> {
        // data为ObjC传递给JS的数据
        this.headerMsgNum = parseInt(data) ;
        // js返回数据给Objc
        responseCallback('success')
    });
  },
  methods: {
    init: function() {
      this.params = {
        uniqueId: this.show.uniqueId
      };
      this.$http.post("user/getUserInfo", this.params).then(
        res => {
          console.log(res);
          res = res.data;
          //start
          let that = this;
          let srcArr = res.avatarUrl;
          that.loadImg(srcArr, function(imgArr) {
            that.show.avatarUrl = imgArr ;
          });
          //end
          this.show.nickName = res.nickName;
          this.show.commissionAccumulatedIncome = res.commissionAccumulatedIncome?res.commissionAccumulatedIncome:0;
          this.show.accountBalance = res.accountBalance?res.accountBalance:0;
          this.show.adForwardingCount = res.adForwardingCount 
          this.show.realNameCertStatus = res.realNameCertStatus;
        },
        err => {
          console.log(err);
        }
      );
    },
    initDialog() {
      Dialog.setDefaultOptions({
        messageAlign: "center",
        cancelButtonColor: "#303133",
        confirmButtonColor: "#FF2525",
        closeOnPopstate: true
      });
    },
    signOut() {
      Dialog.confirm({
        message: "你确定要退出吗？",
        showCancelButton: true,
        confirmButtonText: "确定",
        beforeClose: (action, done) => {
          done();
          if (action === "confirm") {
            this.params = {
              uniqueId: this.show.uniqueId
            };
            this.$http.post("user/logOut", this.params).then(res=>{
              console.log(res)
            });
            window.localStorage.setItem("uniqueIdByInfluencer", null);
            window.localStorage.removeItem("uniqueIdByInfluencer");window.localStorage.setItem("uniqueId", null);
            window.localStorage.removeItem("uniqueId");
            this.$bridge.callHandler("logoutRoler", {}, res => {
              console.log(res);
            });
            Toast.success({
              forbidClick: true,
              message: "退出成功",
              onClose: () => {
                this.$router.replace("/infLogin/login");
              }
            });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin-top: 86px;
  .header {
    width: 100%;
    height: 216px;
    position: relative;
    img {
      width: 144px;
      height: 144px;
      border-radius: 50%;
      position: absolute;
      left: 32px;
      top: 24px;
    }
    .h-name {
      position: absolute;
      left: 204px;
      top: 45px;
      font-size: 40px;
      font-family: PingFangSC-Medium;
      font-weight: bold;
      color: rgba(48, 49, 51, 1);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      width: 280px;
    }
    .h-id {
      position: absolute;
      left: 204px;
      top: 105px;
      font-size: 30px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
    }
    button {
      position: absolute;
      right: 32px;
      top: 68px;
      width: 142px;
      height: 56px;
      line-height: 56px;
      text-align: center;
      background: rgba(255, 37, 37, 1);
      border-radius: 28px;
      font-size: 24px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
  .section {
    height: 172px;
    padding-left: 19px;
    padding-right: 32px;
    position: relative;
    .s-items {
      width: 336px;
      height: 144px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      .s-content {
        width: 100%;
        height: 100%;
        position: relative;
        img {
          width: 88px;
          height: 88px;
          position: absolute;
          left: 16px;
          top: 32px;
        }
        .sc-money {
          font-size: 32px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(48, 49, 51, 1);
          position: absolute;
          left: 116px;
          top: 31px;
        }
        .sc-name {
          font-size: 24px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(129, 129, 129, 1);
          position: absolute;
          left: 116px;
          top: 80px;
        }
      }
    }
    .s-left {
      position: absolute;
      left: 19px;
      top: 0px;
    }
    .s-right {
      position: absolute;
      right: 32px;
      top: 0px;
    }
  }
  .footer {
    padding-left: 32px;
    padding-right: 32px;
    .f-items {
      width: 100%;
      height: 128px;
      position: relative;
      border-bottom: 2px solid rgba(248, 249, 251, 1);
      .fi-img {
        width: 42px;
        height: 42px;
        position: absolute;
        left: 0px;
        top: 43px;
      }
      .fi-img-right {
        width: 30px;
        height: 30px;
        border-radius: 50%; 
        position: absolute;
        right: 0px;
        top: 49px;
      }
      .fi-name {
        font-size: 32px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 66px;
        top: 42px;
      }
      .fi-type {
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(129, 129, 129, 1);
        position: absolute;
        right: 42px;
        top: 44px;
      }
      .fi-num {
        width: 16px;
        height: 16px;
        // line-height: 30px;
        // font-size: 24px;
        text-align: center;
        background: rgba(255, 37, 37, 1);
        border-radius: 50%;
        position: absolute;
        right: 10px;
        top: 0;
        bottom: 0;
        margin: auto;
        color: #fff;
      }
    }
    .f-signOut {
      margin-top: 48px;
      margin-bottom: 148px;
      width: 100%;
      text-align: center;
      font-size: 32px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 37, 37, 1);
    }
  }
}
</style>
